<template>
  <view class="content">
    <view :style="{backgroundImage: 'url('+imagePath + detail.coverImage + ')'}"
          class="header"></view>
    <view class="info">
      <view class="title">{{ detail.peerTitle }}</view>
      <view class="activeTime">活动时间：{{ detail.timeStart }}至{{ detail.timeEnd }}</view>
      <view class="time f-c-c">
        <view class="time-title">距报名结束仅剩</view>
        <view class="time-wrapper">
          <span class="day">{{ liveCountdown.day }}天</span>
          <span class="hou">{{ liveCountdown.hou }}</span>
          :
          <span class="min">{{ liveCountdown.min }}</span>
          :
          <span class="sec">{{ liveCountdown.sec }}</span>
        </view>
      </view>
    </view>
    <view class="box" style="margin-top: -25px;">
      <view class="title"> 活动奖品</view>
      <view class="f-c-fs">
        <view v-for="(item,index) in detail.prizeList" :key="index" class="item">
          <image :src="imagePath+item.prizeUrl" class="img" mode="aspectFill"></image>
          <view class="detail">
            <view>{{ item.peerName }}</view>
            <!-- <view>X5</view> -->
          </view>
          <view class="label">{{ item.numberContent }}</view>
        </view>
      </view>
    </view>
    <view class="box">
      <view class="title">组队成员</view>
      <view class="menu">
        <view class="label f-c-c">
          <text>{{ detail.team }}</text>
          <view></view>
          <!--					还差-->
          <!--					<text class="num">3</text>-->
          {{ detail.difference }}
        </view>
        <view class="f-c-sa list">
          <view></view>
          <view></view>
          <view></view>
          <view></view>
          <view></view>
        </view>
        <view class="btn">邀请好友</view>
      </view>
    </view>
    <view class="box">
      <view class="title">获得奖品</view>
      <view class="f-c-c luck">
        <image mode="" :src=imagePath+"glxcx/jk5.png"></image>
        暂未获得奖品
      </view>
    </view>
    <view class="box">
      <view class="title">活动地点</view>
      <view v-for="(item,index) in detail.storeInfoListVos" :key="index" class="addressList">
        <view class="addressList-item">
          <view class="name">{{ item.storeName }}</view>
          <view class="address">{{ item.address }}</view>
          <view class="f-c-sb">
            <view class="f-c-fs">
              <view style="text-align: center;">
                <view class="name" style="text-align: center;">{{ item.distance }}KM</view>
                <view class="address" style="text-align: center;">距离</view>
              </view>
              <view style="text-align: center;margin-left: 80rpx;">
                <view class="name" style="text-align: center;">{{ item.counselorNum }}人</view>
                <view class="address" style="text-align: center;">服务顾问</view>
              </view>
            </view>
            <view class="f-c-fs">
              <view class=" item-r">
                <image class="logo" :src="imagePath+'glxcx/phone.png'"
                       @click="tell(item.phone)"></image>
              </view>
              <view class=" item-r">
                <image
                    class="logo-add"
                    :src="imagePath+'glxcx/address.png'"
                    @click="goAddress(item.lon, item.lat)"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="box">
      <view class="title">活动介绍</view>
      <u-parse :html="detail.peerContent"></u-parse>
    </view>
  </view>
</template>

<script>
import {peerDetail, peerPreview} from "../../api/marketing";

export default {
  data() {
    return {
	  imagePath:this.$imagePath,
      liveCountdown: {day: '0', hou: '00', min: '00', sec: '00'},
      detail: {},
      param: {
        id: ''
      }
    };
  },
  onLoad(option) {
    let objParam = JSON.parse(option.param);
    if (objParam.id) {
      this.param.id = objParam.id;
    } else {
      this.param = this.$get('peerDetail')
    }
    this.init();
  },
  methods: {
    init() {
      if (this.param.id) {
        this.getData();
      } else {
        this.privew()
      }
    },
    getData() {
      this.param.lon = this.$get('location')[0] ? this.$get('location')[0] : ''
      this.param.lat = this.$get('location')[1] ? this.$get('location')[1] : ''
      peerDetail(this.param).then(res => {
        console.log(res);
        if (res.code == 1) {
          this.detail = res.data;
          this.getLiveTimeCount(res.data.timeEnd);
        }
      })

    },
    privew() {
      peerPreview(this.param).then(res => {
        console.log(res);
        if (res.code == 1) {
          this.detail = res.data;
          this.getLiveTimeCount(res.data.timeEnd);
        }
      })
    },
    getLiveTimeCount(startTime) {
      if (startTime) {
        //如果设置了开始时间
        this.liveCountTimes = setInterval(() => {
          //注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
          let transedPreTime = startTime.replace(/-/g, '/'); //这里转化时间格式为以/分隔形式
          let nowTime = new Date().getTime();
          let preTime = new Date(transedPreTime).getTime();
          let obj = null;
          if (preTime - nowTime > 0) {
            let time = (preTime - nowTime) / 1000;
            let day = parseInt(time / (60 * 60 * 24));
            let hou = parseInt((time % (60 * 60 * 24)) / 3600);
            let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
            let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
            this.liveCountdown = {
              day: day,
              hou: hou < 10 ? '0' + hou : hou,
              min: min < 10 ? '0' + min : min,
              sec: sec < 10 ? '0' + sec : sec
            };
          } else {
            obj = {day: '0', hou: '00', min: '00', sec: '00'};
            this.liveCountdown = obj;
            clearInterval(this.liveCountTimes);
          }
        }, 1000);
      } else {
        var obj = {day: '0', hou: '00', min: '00', sec: '00'};
        this.liveCountdown = obj;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  background: linear-gradient(#b7edff 0%, #caf2ff 100%);

  .header {
    width: 100%;
    height: 300rpx;
    background-size: cover;
    background-image: url('https://sj.shopec.com.cn/image-server/glxcx/jk3.png');
  }

  .box {
    width: 100%;
    padding: 46rpx;
    box-sizing: border-box;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      line-height: 48rpx;
    }

    .f-c-fs {
      flex-wrap: wrap;
    }

    .name {
      margin-top: 30rpx;
      font-size: 28rpx;
      font-weight: bold;
      text-align: left;
      color: #333333;
    }

    .address {
      font-size: 24rpx;
      font-weight: bold;
      text-align: left;
      color: #999999;
    }

    .item-r {
      image {
        width: 35rpx;
        height: 35rpx;
        border-radius: 50%;
        margin: 0 30rpx;
      }
    }

    .item {
      width: 214rpx;
      height: 291rpx;
      background: #ffffff;
      border: 2rpx solid #ffffff;
      border-radius: 20rpx;
      overflow: hidden;
      position: relative;
      margin-top: 38rpx;
      margin-right: 4rpx;

      .label {
        min-width: 135rpx;
        height: 36rpx;
        background: linear-gradient(0deg, #ffb244 0%, #ffd58e 100%);
        border-radius: 20rpx 0px 20rpx 0px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        top: 5rpx;
        left: 5rpx;
        padding: 0 5rpx;
        font-size: 18rpx;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
      }

      .img {
        width: 214rpx;
        height: 214rpx;
      }

      .detail {
        width: 214rpx;
        height: 90rpx;
        background: #c9f2ff;
        font-size: 22rpx;
        font-weight: 700;
        text-align: center;
        color: #478ca3;
        line-height: 45rpx;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }

    .luck {
      margin: 47rpx 0;
      font-size: 22rpx;
      font-weight: 700;
      text-align: center;
      color: #478ca3;

      image {
        width: 72rpx;
        height: 64rpx;
        margin-right: 23rpx;
      }
    }

    .menu {
      width: 659rpx;
      height: 318rpx;
      background: #ffffff;
      border: 2rpx solid #ffffff;
      border-radius: 20rpx;
      margin: 47rpx auto;
      position: relative;

      .list {
        view {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          background-image: url('https://sj.shopec.com.cn/image-server/glxcx/jk1.png');
          background-size: cover;
          margin: 76rpx 0 30rpx 0;
        }
      }

      .btn {
        width: 600rpx;
        height: 80rpx;
        background: linear-gradient(0deg, #ff666c 0%, #ffb97a 100%);
        border-radius: 40rpx;
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        line-height: 80rpx;
        color: #ffffff;
        margin: 0 auto;
      }

      .label {
        min-width: 416rpx;
        height: 46rpx;
        background: #89e3ff;
        border-radius: 0px 0px 20rpx 0px;
        font-size: 22rpx;
        font-weight: 400;
        text-align: left;
        color: #333333;
        padding: 0 5rpx;
        line-height: 46rpx;
        box-sizing: border-box;
        font-style: italic;
        position: absolute;
        top: 0;
        left: 0;

        view {
          width: 6rpx;
          height: 6rpx;
          background: #0099d5;
          margin: 0 6rpx;
        }

        text {
          font-weight: 700;
          color: #333333;
          font-style: normal;

          &.num {
            font-style: italic !important;
            color: #0099d5;
          }
        }
      }
    }
  }

  .info {
    width: 100%;
    height: 183rpx;
    background: linear-gradient(#ffffff 0%, #a6e9ff 100%);
    border: 4rpx solid #ffffff;
    border-radius: 45rpx;
    position: relative;
    top: -25rpx;

    .title {
      width: 400rpx;
      height: 43rpx;
      font-size: 32rpx;
      font-weight: bold;
      text-align: left;
      color: #333333;
      margin: 46rpx 45rpx 21rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .activeTime {
      width: 400rpx;
      height: 40rpx;
      background: #499cb6;
      border-radius: 9rpx;
      font-size: 20rpx;
      line-height: 40rpx;
      font-weight: 500;
      text-align: center;
      color: #ffffff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 45rpx;
    }

    .time {
      width: 279rpx;
      height: 183rpx;
      background-size: cover;
      background-image: url('https://sj.shopec.com.cn/image-server/glxcx/jk2.png');
      position: absolute;
      top: 0;
      right: 0;
      color: #237893;
      text-align: center;
      flex-wrap: wrap;
      padding: 30rpx 0;

      .time-title,
      .time-wrapper {
        width: 100%;
      }

      .hou,
      .min,
      .sec {
        display: inline-block;
        background-color: #237893;
        width: 40rpx;
        height: 48rpx;
        color: #fff;
        line-height: 48rpx;
        border-radius: 6rpx;
        margin: 0 10rpx;
      }
    }
  }
}
</style>
